<template>
	<view class="cardholder_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.cardholder.title')"/>
		<view class="cardholder_content">
			<view class="cardholder_item" v-for="item in cardholderList" :key="item.id" v-if="cardholderList && cardholderList.length !==0">
				<view class="cardholder_item_left">
					<view>{{item.ownerFirstName}} {{item.ownerLastName}}</view>
					<view class="_left-">{{formatDate(item.ctdate)}}</view>
				</view>
				<up-image src="/static/comm/delete.png" width="20" height="20" bgColor="#f1f6ff00" @click="deleteCardholder(item)"></up-image>
			</view>
			<view v-else class="not_data_warp">
				 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
				 <view class="not_data_msg_warp">{{$t("mine.cardholder.not.content")}}</view>
			</view>
			
			<view class="but_comm_warp" @click="addCardholder">
				{{$t('mine.cardholder.add')}}
			</view>
		</view>
		<!-- 温馨提示 -->
		<up-modal :show="openShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow=false;">
					<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">{{$t('common.warm.reminder')}}</view>
					<view class="content_2">{{$t('mine.cardholder.delete.msg')}}</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="deleteOK">{{$t("common.confirm")}}</view>
					<view class="but_close" @click="openShow=false;">{{$t("common.cancel")}}</view>
				</view>
			</view>
		</up-modal>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getCardOwners,deleteCardOwners } from '@/api/card.js';
	import { copyData,formatDate } from '@/utils/index.js';
	
	export default {
		components:{Header},
		data() {
			return {
				cardholderList:[],
				form:{
					id:0,
				},
				openShow:false,
			};
		},
		mounted() {
			this.getCardOwnersFun();
		},
		methods: {
			copyData,
			formatDate,
			// 新增持卡人
			addCardholder(){
				uni.navigateTo({
					url:"/pages/cardholder_add/cardholder_add",
				})
			},
			/**
			 * 查询持卡人
			 */
			async getCardOwnersFun(){
				const resp = await getCardOwners();
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					this.cardholderList = data;
				}
			},
			/**
			 * 删除持卡人
			 */
			deleteCardholder(item){
				this.form.id = item.id;
				this.openShow = true;
			},
			// 删除
			async deleteOK(){
				const params= this.form;
				const resp = await deleteCardOwners(params);
				if(resp && resp.bizcode === 100){
					this.getCardOwnersFun();
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t("mine.cardholder.delete.ok"),
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.cardholder_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	.cardholder_content{
		padding: 30rpx;
		height: calc(100vh - 458rpx);
		overflow: auto;
		.cardholder_item{
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			border: 1px solid #999999;
			padding: 30rpx;
		}
		.but_comm_warp{
			position: fixed;
			bottom: 100rpx;
			width: calc(100% - 60rpx);
		}
	}
}
</style>
